<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="用户ID"
        style="width:100px"
      />
      <el-select
        v-model="listQuery.countryCode"
        clearable
        filterable
        placeholder="国家"
        style="width:100px"
      >
        <el-option
          v-for="(value, key, index) in countryCodeItem"
          :key="index"
          :label="value"
          :value="key"
        />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div style="margin:10px 0">
      <el-button
        type="warning"
        @click="onHandleAll('1')"
      >批量通过</el-button>
      <el-button
        type="danger"
        @click="onHandleAll('2')"
      >批量拒绝</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 350px)'"
        border
        fit
        size="small"
        :row-key="row => row.applyTime + row.userInfoVo.userId"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
      >
        >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          label="用户ID"
          prop="userId"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userInfoVo.userId" />
            <span>{{ userAddress[row.userInfoVo.userId] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="国家" width="130">
          <template slot-scope="{ row }">{{ row.userInfoVo.countryCode | countryCode }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="新昵称"
        >
          <template slot-scope="{row}">{{ row.newNickname }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="原昵称"
        >
          <template slot-scope="{row}">{{ row.oldNickname }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="性别"
        >
          <template slot-scope="{row}">{{ row.userInfoVo.gender|gender }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="时间"
        >
          <template slot-scope="{row}">{{ row.applyTime | parseTime }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="账户状态"
        >
          <template slot-scope="{row}">
            <span :class="{highlight:row.userInfoVo.forbidState!==0}">{{ row.userInfoVo.forbidState |forbidState }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template v-if="row.customerType !== 1" slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="onVerifyRow(row,'1')"
            >通过</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="onVerifyRow(row,'2')"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
      />
    </div>
    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
    />
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import ImageViewer from '@/components/ImageViewer'

import { xhrAnchorNameList, xhrNameVerify } from '@api/anchor'
import AnchorMixin from './mixin'
import { getCountryItem } from '@/filters'
export default {
  name: 'NicknameList',
  components: { TablePagination, ImageViewer },

  filters: {
    forbidState(val) {
      const obj = {
        0: '正常',
        1: '已封号',
        2: '禁聊'
      }
      return obj[val]
    },
    identifyType(val) {
      const obj = {
        0: '未认证',
        1: '真人认证',
        2: '主播认证'
      }
      return obj[val]
    }
  },
  mixins: [AnchorMixin],
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        gender: null,
        identifyType: null,
        type: 0,
        pageNum: 1,
        pageSize: 100
      },
      daterangeValue: '',
      showImage: false,
      imageUrl: '',
      selectRows: [],
      userAddress: {},
      listLoading: false,
      countryCodeItem: getCountryItem()
    }
  },

  // created() {
  //   this.doSearch()
  // },
  methods: {
    doSearch() {
      this.listLoading = true
      if (!this.validateParams(this.listQuery)) {
        return
      }
      this.handleCheckedStatus()
      xhrAnchorNameList(this.listQuery)
        .then(resp => {
          this.list = resp.data.list.map(item => Object.assign(item, { customerType: this.listQuery.type })) // 增加了是否是审核得字段
          this.total = resp.data.total
          if (resp.data.userAddress){
            this.userAddress = resp.data.userAddress
          }
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
    },
    handleSelectionChange(rows) {
      this.selectRows = rows
    },
    onHandleAll(status) {
      if (!this.selectRows.length) {
        this.$message.warning('请选择一条数据')
      } else {
        const params = this.generateParams(this.selectRows, status)
        this.onVerify(params, status, true)
      }
    },
    generateParams(rows, status) {
      const userIds = []
      rows.forEach(row => {
        const { userId } = row.userInfoVo
        userIds.push(userId)
      })
      return {
        status,
        userIds
      }
    },
    onVerifyRow(row, status) {
      const params = this.generateParams([row], status)
      this.onVerify(params, status)
    },
    onVerify(params, status, isBatch) {
      let title = status === '1' ? '通过' : '拒绝'
      title = isBatch ? '批量' + title : title
      this.$confirm('确定' + title + '审核？').then(() => {
        xhrNameVerify(params)
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      })
    },
    handleClick(tab) {
      switch (tab.name) {
        case 'second':
          this.$router.push('/anchor/cover-image')
          break
        case 'third':
          this.$router.push('/anchor/video')
          break
        case 'fourth':
          this.$router.push('/anchor/photos')
          break
      }
    }
  }
}
</script>
